<!-- demo https://www.ckplayer.com/demo.html -->
<template>
  <div class="video-container">
    <viewHeader :file-id="fileId" />
    <div id="video" class="video-content" />
  </div>
</template>
<script>
import viewHeader from './header.vue'
export default {
  components: { viewHeader },
  data() {
    return {
      fileId: null,
      player: '',
      videoObject: {
        container: '#video', // 容器的ID或className
        variable: 'player', // 播放函数名称
        loaded: this.loadedHandler(), // 当播放器加载后执行的函数
        loop: true, // 播放结束是否循环播放
        autoplay: true, // 自动播放
        config: '', // 指定配置函数
        debug: true, // 是否开启调试模式
        drag: 'start', // 拖动的属性
        seek: 0, // 默认跳转的时间
        promptSpot: [ // 提示点
          {
            words: '提示点文字01',
            time: 30
          },
          {
            words: '提示点文字02',
            time: 150
          }
        ]
      }
    }
  },
  mounted() {
    var { id, title } = this.$route.params
    document.title = title
    this.fileId = id
    this.videoObject.video = [[this.global.getFileView(id), 'video/mp4', title, 0]]
    // eslint-disable-next-line no-undef, new-cap
    this.player = new ckplayer(this.videoObject)
  },
  methods: {
    loadedHandler() {
      console.log('视频加载完毕')
    }

  }
}
</script>
<style lang="scss" scoped>
    .video-container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .video-content{
            width: 100%;
            flex: 1;
        }
    }
</style>
